<template>
<div>
    <!--搜索框-->
    <el-row style="height: 80px;width:45%;background-color: white;margin: 0 auto">
        <el-col :span="21">
            <el-input style="line-height: 80px;width: 100%" placeholder="文章/疾病/医生/药品/医院" @keydown.native.enter="search(title)" v-model="title"></el-input>
        </el-col>
        <el-col :span="3"><el-button style="margin-top: 20px" @click="search(title)">搜索</el-button></el-col>
        <div style="margin: 0 auto;height: 100%; width: 40%">

        </div>
    </el-row>

    <!--外边灰框-->
    <div style="width: 1300px;margin:0 auto;background-color: whitesmoke;border: 1px; padding: 40px;border-radius: 20px;">

        <!--面包屑-->
        <el-row style="height:40px">
            <el-breadcrumb separator="/" style="margin-left: 10px">
                <el-breadcrumb-item :to="{ path: '/' }"><a href="/home">首页</a></el-breadcrumb-item>
                <el-breadcrumb-item>医药百科</el-breadcrumb-item>
            </el-breadcrumb>
        </el-row>

        <!--科室-->
        <el-row style="width: 99%;margin-bottom: 25px">
            <el-card style="width: 100%">
                <el-button @click="selectDep(d.id)" class="div_el_button" v-for="d in department" style="margin: 0 25px 10px 0;display: inline-block">
                    {{d.depTitle}}
                </el-button>
            </el-card>
        </el-row>

        <!--文章列表以及相关信息-->
        <el-row style="width: 100%" :gutter="20">
            <!--左侧文章列表-->
            <el-col :span="18" >
                <el-card style="margin-bottom: 20px" v-for="a in articles" >
                    <el-row style="margin-bottom: 10px">
                        <p style="margin-left:5px;font: 20px '微软雅黑 Light'">
                            <a :href="'/encDetail?articleId='+a.id" style="text-decoration: none;color: #4a4a4a">{{a.title}}</a></p>
                        <p class="brief_p" style="margin-left:5px;font: 15px '微软雅黑 Light'">{{a.brief}}</p>
                    </el-row>
                    <el-row style="width: 40%">
                        <el-col :span="8">
                            <el-button style="font: 10px '微软雅黑 Light';text-align: center">审核专家</el-button>
                        </el-col>
                        <el-col :span="2">
                            <img :src="a.avatar" style="width: 40px;height:40px;border-radius: 100px">
                        </el-col>
                        <el-col :span="14" style="line-height: 30px">
                            <span style="font: 11px '微软雅黑 Light';margin-left: 30px">{{a.name}}</span>
                            <span style="font: 11px '微软雅黑 Light';margin-left: 10px">{{a.depTitle}}</span>
                            <span style="font: 11px '微软雅黑 Light';margin-left: 10px">{{a.duty}}</span>
                        </el-col>
                    </el-row>
                </el-card>
            </el-col>
            <!--右侧相关医生-->
            <el-col :span="6">
                <el-card style="width: 100%;padding: 0">
                    <p style="font: 18px '微软雅黑 Light'">相关医生推荐</p>

                    <!--单个医生信息-->
                    <el-row v-for="d in otherDr">
                        <el-divider></el-divider>
                        <el-row>
                            <el-col :span="4">
                                <a href=" "><img :src="d.avatar" style="width:40px;height: 40px; border-radius: 50px"></a>
                            </el-col>
                            <el-col :span="20" >
                                <a href="" style="font: 16px '微软雅黑 Light';margin: 0 0 5px 10px;text-decoration:none;color:#00CB8E;display: block">{{d.name}}</a>
                                <p class="hospital_p" style="font: 12px '微软雅黑 Light';margin: 0 0 5px 10px">{{d.hospital}}</p>
                                <p style="font: 8px '微软雅黑 Light';margin: 0 0 5px 10px">{{d.duty}}</p>
                            </el-col>
                        </el-row>

                    </el-row>


                </el-card>
            </el-col>
        </el-row>

        <!--板块结束-->
    </div>

</div>
</template>
<style>
/*头部第一行*/
.a{
    text-decoration: none;
    color: #4a4a4a;
}

/*整体*/
body{
    margin: 0 auto;
    padding: 0;
}
/*主题样式*/
body{
    margin: 0 auto;
    padding: 0;
}

.div_li{
    float: left;
    margin-right: 100px;
    margin-bottom: 20px;
    font: 15px "微软雅黑 Light";
}
p{
    font: 18px "微软雅黑";
}
.div_p{
    color: white;
    margin:70px 30px
}
.el-menu--horizontal>.el-menu-item.is-active {
    border-bottom: 2px solid #00cb8e;
    color: #00cb8e;
}
.div_el_button{
    padding: 10px;
    border-radius: 20px;
    margin-left: 10px
}
.brief_p,.hospital_p{
    overflow: hidden;
    /*设置超出的部分用省略号展示*/
    display: -webkit-box;
    -webkit-line-clamp:1; /*设置显示的行数*/
    -webkit-box-orient: vertical;  /*设置纵向排列*/
}
</style>
<script>
import axios from "axios";
import BaseUrl from "@/http/BaseUrl";
import SimpleAxios from "@/http/SimpleAxios";

export default {
    data(){
        return{
            activeTab:"3",
            articles:[
            ],
            otherDr:[
            ],
            department:[],
            hotArr:[],
            title:"",
        }
    },
    methods: {
        search(title){
            if(title.trim()==""){
                this.$message.error("请输入搜索内容！")
                return;
            }
            location.href='/encyclopedia?title='+title
        },
        searchByTitle(title){
            console.log("searchByTitle开始执行")
            let url = BaseUrl.INDEX+'/search/query?';
            console.log(url)
            console.log(this.title)
            SimpleAxios.get(url, {"title":title}).then((response)=>{
                if(response.data.state!=20000){
                    this.$message.error("搜索失败！")
                }
                this.articles = response.data.data;
                // console.log()
            })
        },


        selectDep(key,keyPath){
            this.loadContentList(key);
            this.loadOtherDoc(key);
        },
        loadContentList(depId){

            let url=BaseUrl.INDEX+'/encyclopedia/encList/'+depId;
            axios.get(url).then((response)=>{
                let jsonResult=response.data;
                if (jsonResult.state===20000){
                    this.articles=response.data.data;
                }
            })
        },
        /*其他医生板块*/
        loadOtherDoc(depId){
            let otherUrl=BaseUrl.INDEX+ '/encyclopedia/encList/otherDoc/'+depId;
            console.log('url='+otherUrl);
            this.axios.get(otherUrl).then((response)=>{
                let jsonResult=response.data;
                if (jsonResult.state===20000){
                    this.otherDr=response.data.data;
                }
            })
        }
    },
    created() {
        let depUrl=BaseUrl.INDEX+'/encyclopedia/encList/departments';

        if(location.search.includes("title")){
            let title=new URLSearchParams(location.search).get("title");
            this.searchByTitle(title);
            console.log(title);

        }
        SimpleAxios.get(depUrl).then((response)=>{
            let jsonResult=response.data;
            if (jsonResult.state===20000){
                this.department=response.data.data;
            }
        })
        this.loadContentList(2);
        this.loadOtherDoc(2);
    },
    mounted() {
    }
}
</script>